<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="sql" prop="sql">
        <el-input v-model="form.sql" placeholder="请填写想要操作的sql命令" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="db" prop="db">
        <el-input v-model="form.db" placeholder="请填写查询的db名，db名为在config.{env}.yaml中配置的名称" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form.env" label="test">test</el-radio>
        <el-radio v-model="form.env" label="uat">uat</el-radio>
        <el-radio v-model="form.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item style="margin-top: 20px">
        <el-button type="primary" @click="onSubmit('form')">立即查询</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn[0]" dbcheck="True"></result-pane>
    </div>
    <div>
      <a href="https://confluence.shopee.io/pages/viewpage.action?pageId=57089259" target="_blank">CRM BE 数据库链接</a>
      <a href="https://confluence.shopee.io/pages/viewpage.action?pageId=331162189" target="_blank">MBS BE 数据库链接</a>
    </div>
    <shopee-tabs value="CRM">
      <shopee-tab-pane label="crm" name="CRM">
        <el-table :data="CrmDbData" border style="width: 100%; margin-top: 20px">
          <el-table-column prop="project" label="项目" width="180"></el-table-column>
          <el-table-column prop="db_name" label="CRM数据库名称"></el-table-column>
          <el-table-column label="表名" prop="table_name">
              <template slot-scope="props">
                <p v-for="arry in props.row.table_name" :key="arry.id">{{arry.text}}</p>
              </template>
          </el-table-column>
        </el-table>
      </shopee-tab-pane>
      <shopee-tab-pane label="mbs" name="MBS">
        <el-table :data="MbsDbData" border style="width: 100%; margin-top: 20px">
          <el-table-column prop="project" label="项目" width="180"></el-table-column>
          <el-table-column prop="db_name" label="MBS数据库名称"></el-table-column>
          <el-table-column prop="table_name" label="表名">
              <template slot-scope="props">
                <p v-for="arry in props.row.table_name" :key="arry.id">{{arry.text}}</p>
              </template>
          </el-table-column>
        </el-table>
      </shopee-tab-pane>
     </shopee-tabs>
  </div>
</template>

<script>
  import ResultPane from './ResultPane'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "QueryDb",
    data() {
      return {
        showResultCard: false,
        isLoadingResult: false,
        form: {
          sql: '',
          db: '',
          env: 'test'
        },
        rules: {
          sql: [
            {required: true, message: 'sql不能为空', trigger: 'blur'}
          ],
          db: [
            {required: true, message: 'db不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
        },
        CrmDbData: [{
          project:'CRM',
          db_name: 'crmMain',
          table_name: [
            {"text":"buyer_limit_tab"},
            {"text":"crm_appeal_tab"},
            {"text":"crm_block_info_tab"},
            {"text":"crm_buyer_group_attach_tab"},
            {"text":"crm_buyer_group_tab"},
            {"text":"crm_draft_tab"},
            {"text":"crm_indicator_tab"},
            {"text":"crm_novice_guard_tab"},
            {"text":"crm_promotion_plan_tab"},
            {"text":"crm_quota_limit_tab"},
            {"text":"crm_script_push_tab"},
            {"text":"crm_shop_attach_tab"},
            {"text":"crm_shop_whitelist_tab"},
            {"text":"crm_tier_limit_tab"},
            {"text":"crm_uploaded_file_tab"},
            {"text":"crm_whitelist_cfg_info_tab"},
            {"text":"group_content_tab"},
            {"text":"operate_record_tab"},
            {"text":"promotion_push_plan_tab"},
            {"text":"push_data_stats_tab"},
            {"text":"region_config_tab"},
            {"text":"shop_limit_tab"},
            {"text":"shop_type_limit_tab"}
          ],
        },{
          project:'CRM',
          db_name: 'crmData',
          table_name: [
            {"text":"user_cart_item_tab"}
          ],
        },{
          project:'CRM',
          db_name: 'crmPushData',
          table_name: [
            {"text":"push_data_tab_XXXXXXXX"}
          ],
        }],

        MbsDbData: [{
          project:'MBS',
          db_name: 'profile',
          table_name: [
            {"text":"membership_user_profile_xx_tab"}
          ],
        },
        {
          project:'MBS',
          db_name: 'tier',
          table_name: [
            {"text":"membership_tier_xx_tab"},
            {"text":"membership_tier_change_record_xx_tab_xxxxxxxx"},
            {"text":"membership_tier_detail_xx_tab"}
          ],
        },
        {
          project:'MBS',
          db_name: 'point',
          table_name: [
            {"text":"membership_point_xx_tab"},
            {"text":"membership_point_change_record_xx_tab_xxxxxxxx"},
            {"text":"membership_point_detail_xx_tab"},
            {"text":"membership_point_redeem_status_xx_tab_xxxxxxxx"},
            {"text":"membership_benefit_detail_xx_tab"},
            {"text":"membership_benefit_extend_xx_tab"}
          ],
        },
        {
          project:'MBS',
          db_name: 'rule',
          table_name: [
            {"text":"membership_tier_rule_xx_tab"},
            {"text":"membership_point_rule_xx_tab"},
            {"text":"membership_display_rule_xx_tab"},
            {"text":"membership_benefit_rule_xx_tab"}
          ],
        },{
          project:'MBS',
          db_name: 'offline',
          table_name: [
            {"text":"membership_offline_deal_xx_tab_xxxxxxxx"}
          ],
        },{
          project:'MBS',
          db_name: 'retry',
          table_name: [
            {"text":"membership_retry_xx_tab_xxxxxxxx"},
            {"text":"shopee_seller_membership_msgdeal_retry_xx_tab_xxxxxxxx"}
          ],
        },{
          project:'MBS',
          db_name: 'stat',
          table_name: [
            {"text":"membership_tier_stat_xx_tab_xxxxxxxx"}
          ],
        },{
          project:'MBS',
          db_name: 'verify',
          table_name: [
            {"text":"membership_verify_record_xx_tab"},
            {"text":"membership_order_xx_tab"}
          ],
        }]
      }
    },
    components:{
      ResultPane
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params = Object.assign({}, this.form);
          postRequest(api['query_db'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      }
    },
  }
</script>

<style scoped>

</style>
